import React, {
	Component
} from 'react';
import {
	bindActionCreators
} from 'redux'
import {
	connect
} from 'react-redux'
import {
	getHotProducts
} from '../../../actions/products/index'
var Row = require('antd/lib/row')
var Col = require('antd/lib/col')
import ProductItem from '../productItem/index.js'
class MoreInformation extends Component {
	state = {

	}
	componentDidMount() {
		let params = {
			categoryId: null,
			start: 0,
			size: 4
		};
		this.props.getHotProducts(params);
	}
	render() {
		let list = this.props.hotProducts
		const {
	      isFb,
	      device
	    } = this.props.home
	    let showIndex = false;
	    if(isFb&&list&&list.length){
	      list.map((n)=>{
	        if(n.toFacebook){
	          showIndex = true;
	        }
	      })
	    }
		return list && list.length ? (
			<div className="moreInformation">
		    	<h1 style={{display:(showIndex||!isFb)?'block':"none"}}>HOT PRODUCTS</h1>
		    	{
		    		<Row gutter={16}>{
	                  list.map((item,index)=>{
	                  	return isFb?
	                  	(!item.toFacebook?
	                  		null:
	                  		<Col span={6} key={index}>
		                        <div>
		                          <ProductItem productinfo={item}/>
		                        </div> 
		                     </Col>
	                  	):
	                     <Col span={12} key={index}>
	                        <div>
	                          <ProductItem productinfo={item}/>
	                        </div> 
	                     </Col>
	                              
	                    })
	                }
                </Row>
		    	}
        	</div>
		) : null
	}
}

const mapStateToProps = ({products,home}) => ({
	hotProducts: products.hotProducts,
	home
});

const mapDispatchToProps = (dispatch) => {
	return {
		getHotProducts: bindActionCreators(getHotProducts, dispatch)
	}
};

export default connect(mapStateToProps, mapDispatchToProps)(MoreInformation)